<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Administrar Incidencias</title>
        <link rel="stylesheet" href="resources/css/style.css" />
        <style type="text/css">
            html{
                height: 100%;
            }
            body{
                height: 80%;
            }
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }   
            .ui-layout-unit-content{
                overflow:visible !important;
            }
            .ui-autocomplete input { /*Amplia tamaño de campo de Texto Autocompletar*/
                width:300px;
            }
            .ui-calendar input{
                width:250px;
            }


        </style>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#idTitulo').css('color','red');
                $('#idCategoria').focus();
            });
            
            /**
             * Habilita los componentes uno a uno para que sigan un orden específico.
             */
            function inicializarCamposIncidencia(){
                $('#idCategoria').focus();
                $('#idTitulo').css("readonly","1");
            }  
        </script>
    </h:head>
    <h:body>

        <p:layout fullPage="true" >  

            <p:layoutUnit position="north" size="100" header="Control de registro de Incidencias" 
                          resizable="false" closable="false" collapsible="false" >  
                <!--Encabezado o Menu Bar que es de Layout -->
                <!--Encabezado o Menu Bar que es de Layout -->
                <h:form id="frmMenu">
                    <p:growl id="messages"/>  
                    <p:menubar >   
                        <p:menuitem value="Inicio" url="inicio.xhtml" icon="inicio" />  

                        <p:submenu  label="Administracion" icon="administracion">  
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminUsuario}" value="Usuarios" url="administrarUsuarios.xhtml" icon="usuario"/>  
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminPerfil}" value="Perfiles" url="administrarPerfiles.xhtml" icon="permisos"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminArea}" value="Areas" url="administrarAreas.xhtml" icon="areas"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminCategoria}" value="Categorias" url="administrarCategorias.xhtml" icon="categorias"/>
                            <p:menuitem rendered="#{loginBean.usuario.perfil.adminCargo}" value="Cargos" url="administrarCargos.xhtml" icon="cargos"/>
                        </p:submenu>  

                      <p:submenu label="Base de Conocimiento" icon="baseConocimiento" 
                                   rendered="#{loginBean.usuario.perfil.adminBaseConocimiento}">  
                            <p:menuitem value="Soluciones" url="administrarBaseConocimiento.xhtml" icon ="solucion"/>   
                        </p:submenu>

                          <p:submenu label="Incidencias" icon="incidencia"  
                                   rendered="#{loginBean.usuario.perfil.adminIncidencias}">
                             <p:menuitem value="Pendientes:" url="IncidenciasxResolver.xhtml" icon="mio"
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/> 
                            <p:menuitem value="Todas" url="administrarIncidencias.xhtml" icon="problema" 
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/>
                            <p:menuitem value="Asignaciones" url="administrarAsignaciones.xhtml" icon="asociar"
                                        rendered="#{loginBean.usuario.perfil.adminIncidencias}"/> 
                        </p:submenu> 

                        <p:menuitem value="Contraseña" url="#" icon="candado" />  

                        <p:menuitem value="Salir" url="index.jsf" icon="salir" />  
                    </p:menubar>
                    <!--//Cierra Encabezado o Menu Bar que es de Layout -->
                </h:form> 
            </p:layoutUnit>    


            <!--*************************************************************************** -->           
            <!-- Panel central o Contenedor  -->
            <p:layoutUnit position="center" size="1500" style="border-bottom: transparent; border-top: transparent; border-left: transparent; border-right: transparent" > 
                <!-- Inicio de scroll panel-->
                <p:scrollPanel style="width:1300px;height:480px" mode="native" >  
                  <p:panel header="TODAS LAS INCIDENCIAS">  
                </p:panel>
                   

                    <!--mostrar Incidencias registradas -->
                    <h:form id="frmIncidencias" >
                        <p:dataTable id="datatable" var="Incidencia" 
                                     value="#{IncidenciaBean.incidencias}" 
                                     widgetVar="tablaIncidencias"
                                     emptyMessage="Ninguna Incidencia Registrada" paginatorPosition="bottom"
                                     paginator="true" rows="15"  
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15" style="font-size: 12px"  >

                            <f:facet name="header">  
                                <p:outputPanel style="alignment-adjust: ">  
                                    <h:outputText value="Search all fields:" />  
                                    <p:inputText id="globalFilter" onkeyup="tablaUsuarios.filter()" style="width:150px" />  
                                </p:outputPanel>  
                            </f:facet>  

                            <p:column headerText="Id" filterBy="#{Incidencia.codIncidencia}"  >  
                                <h:outputText value="#{Incidencia.codIncidencia}" />  
                            </p:column>  

                            <p:column headerText="Incidencia" filterBy="#{Incidencia.titulo}"  >  
                                <h:outputText value="#{Incidencia.titulo}"/>  
                            </p:column>

                            <p:column headerText="Descripci&oacute;n" filterBy="#{Incidencia.descripcion}">  
                                <h:outputText value="#{Incidencia.descripcion}" />  
                            </p:column>
                            
                            <p:column headerText="Categoria" filterBy="#{Incidencia.categoria.nombre}">  
                                <h:outputText value="#{Incidencia.categoria.nombre}" />  
                            </p:column> 

                            <p:column headerText="Estado" filterBy="#{Incidencia.estado}">  
                                <h:outputText value="#{Incidencia.estado}" />  
                            </p:column> 
                            <p:column headerText="Prioridad" filterBy="#{Incidencia.prioridad}">  
                                <h:outputText value="#{Incidencia.prioridad}" />  
                            </p:column>  

                            <p:column headerText="Solicitante" filterBy="#{Incidencia.usuarioByUsuarioSolicitante.nombres}">  
                                <h:outputText value="#{Incidencia.usuarioByUsuarioSolicitante.nombres} #{Incidencia.usuarioByUsuarioSolicitante.apellidos}"/>  
                            </p:column>  

                            <p:column headerText="Asignado a:" filterBy="#{Incidencia.usuarioByUsuarioAsignado.nombres}">  
                                <h:outputText value="#{Incidencia.usuarioByUsuarioAsignado.nombres}" />  
                            </p:column>  

                            <p:column headerText="Creado :" filterBy="#{Incidencia.apertura}">  
                                <h:outputText value="#{Incidencia.apertura}" />  
                            </p:column>  

                            <p:column style="width:8%; text-align: center " headerText="Config">  
                                <p:commandButton title="Editar" update=":frmEditar" oncomplete="dlgEditar.show();"
                                                 actionListener="#{IncidenciaBean.prepararIncidencia(Incidencia.codIncidencia)}" image="editar"  />  
                                <p:commandButton  title="Eliminar" update=":frmEliminar" oncomplete="dlgEliminar.show();" image="eliminar" 
                                                  actionListener="#{IncidenciaBean.prepararIncidencia(Incidencia.codIncidencia)}"/>  
                            </p:column>     

                        </p:dataTable>  
                    </h:form>
                    <!--//mostrar Incidencias registrados -->


                    <!-- Es necesario el Scrollpanel para ver todos los incidencias registrados si se quiere
                    paginar por cantidades mayores a 5.--> 
                </p:scrollPanel> 
            </p:layoutUnit>   
            <!-- end nuevas lineas añadidas-->

            <p:layoutUnit position="south" size="70" header="" resizable="false" closable="false" collapsible="false" 
                          style="text-align:center; font-size: 12px;" >  
                <h:outputText value="Sistema Control de Reporte de Incidencias" /> <br /> 
                <h:outputText value="Corporaci&oacute;n universitaria Minuto de Dios" />  <br />
                <h:outputText value="Desarrollado por: Yinna Martinez y Diego Babativa - Licencia GPL" /><br />
            </p:layoutUnit>  

            <p:layoutUnit position="west" size="200" header="Bienvenido" resizable="true"
                          closable="false" collapsible="true"> 
                <h:form>  
                    <p:growl id="growl" showDetail="true" />  
                    <h:panelGrid columns="1" cellpadding="10">  
                        <p:graphicImage value="resources/fotos/#{loginBean.usuario.foto}" width="170"/>
                        <h:outputLabel style=" font-size: 14px; color: blue" 
                                       value="Usuario: #{loginBean.usuario.login}"/>

                        <h:outputText style="font: bold; font-size: 12px" value="
                                      E-mail: #{loginBean.usuario.EMail}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Area: #{loginBean.usuario.area.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Perfil: #{loginBean.usuario.perfil.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Cargo: #{loginBean.usuario.cargo.nombre}"/>

                        <h:outputText style="font: bold; font-size: 14px" value="
                                      Movil: #{loginBean.usuario.numCelular}"/>

                    </h:panelGrid>   
                </h:form>  
            </p:layoutUnit> 
        </p:layout>  


        <!-- *****************************ES PARA NO BLOQUEAR LA PANTALLA p:DIALOG FUERA DEL LAYOUT***************** -->    

           <!--Form  Editar Incidencias  -->
        <h:form id="frmEditar" style="font-size: 12px;">
            <p:dialog header="Actualizar Incidencia" widgetVar="dlgEditar" resizable="false" id="dlgEditar"
                      modal="true" >
                <p:growl id="growlEditar" sticky="true" /> 

                 <h:outputText value="Fecha de Apertura" style="font-weight: bold"/><p:spacer width="50" height="2"/> 
                 <h:outputText value="#{IncidenciaBean.incidencia.apertura}" 
                              style="width: 100px" />  

                <p:spacer width="100" height="2"/>

                <h:outputText value="Categoria" style="font-weight: bold"/><p:spacer width="60" height="2"/>
                <p:selectOneMenu value="#{IncidenciaBean.codCategoria}" effect="fold"  required="true" 
                                 label="Categoria" requiredMessage="Debe Pertenecer a una Categoria" 
                                 style="width: 250px" id="idCategoria" >
                    <f:selectItem itemLabel="#{IncidenciaBean.incidencia.categoria.nombre}"  
                                  itemValue="#{IncidenciaBean.incidencia.categoria.codCategoria}"  />
                    <f:selectItems value="#{categoriaBean.categorias}" var="categoria"
                                   itemLabel="#{categoria.nombre}" itemValue="#{categoria.codCategoria}" />
                         <p:ajax update="asignados"  
                                    listener="#{IncidenciaBean.manejarCambioCategoria()}" />
                </p:selectOneMenu>
                <br /><br />
                <p:separator />
                <br />

                <h:outputText value="Incidencia" style="font-weight: bold" /><br />
                <p:spacer width="170" height="2"/>
                <p:inputText value="#{IncidenciaBean.incidencia.titulo}" style="width: 350px;" >
                </p:inputText>

                <p:spacer width="50" height="2"/>  

                <h:outputText value="Prioridad en Atención: " style="font-weight: bold;" />
                <p:spacer width="50" height="2"/>
                <p:selectOneMenu value="#{IncidenciaBean.incidencia.prioridad}" required="true" 
                                 requiredMessage="Debe seleccionar una Prioridad" >
                    <f:selectItem itemLabel="#{IncidenciaBean.incidencia.prioridad}"  
                                  itemValue="#{IncidenciaBean.incidencia.prioridad}"  />
                    <f:selectItem itemLabel="ALTA" itemValue="ALTA"/>
                    <f:selectItem itemLabel="MEDIA" itemValue="MEDIA"/>
                    <f:selectItem itemLabel="BAJA" itemValue="BAJA"/>
                </p:selectOneMenu> 

                <p:spacer width="100" height="2"/><br /><br />
                <h:outputText value="Descripcion" style="font-weight: bold"  /><br />
                <p:spacer width="170" height="2"/>
                <h:inputTextarea value="#{IncidenciaBean.incidencia.descripcion}" 
                                 cols="50" rows="8" required="true" 
                                 requiredMessage="No puede dejar una Descripcion Vacia"/><br /><br />
                
                <h:outputText value="Estado:" style="font-weight: bold"  /><p:spacer width="125" height="2"/>
                <p:selectOneMenu value="#{IncidenciaBean.incidencia.estado}" required="true" 
                                 requiredMessage="Debe seleccionar un Estado" >
                    <f:selectItem itemLabel="#{IncidenciaBean.incidencia.estado}"  
                                  itemValue="#{IncidenciaBean.incidencia.estado}"  />
                    <f:selectItem itemLabel="ASIGNADA" itemValue="ASIGNADA"/>
                    <f:selectItem itemLabel="RESUELTA" itemValue="RESUELTA"/>
                    <f:selectItem itemLabel="DESHABILITADA" itemValue="DESHABILITADA"/>
                </p:selectOneMenu>  
             
                <br />
                <p:panel header="Usuarios:">
                <!-- Este es el Label de "Solicitante" visible para el Usuario-->
                <h:outputText value="Usuario Solicitante: " style="font-weight: bold" /><p:spacer width="50" height="2"/>
                <h:outputText value="#{loginBean.usuario.nombres} #{loginBean.usuario.apellidos}"  />

                <!-- Este es el solicitante que ellos no ven -->
                <p:selectOneMenu value="#{IncidenciaBean.solicitante}" label="Solicitante" style="visibility: hidden"
                                 id="idSolicitante">
                    <f:selectItem itemLabel="#{loginBean.usuario.nombres}"  
                                  itemValue="#{loginBean.usuario.codUsuario}" />
                </p:selectOneMenu>

                
                    <h:outputText value="Usuario Asignado: " style="font-weight: bold" /><p:spacer width="50" height="2"/>
                        <p:selectOneMenu id="asignados" value="#{IncidenciaBean.codAsignado}">  
                            <f:selectItem itemLabel="#{IncidenciaBean.incidencia.usuarioByUsuarioAsignado.nombres}
                                          #{IncidenciaBean.incidencia.usuarioByUsuarioAsignado.apellidos}"
                                          itemValue="#{IncidenciaBean.incidencia.usuarioByUsuarioAsignado.codUsuario}"  />
                            <f:selectItems value="#{IncidenciaBean.asignados}"  var="asignaciones"
                                           itemLabel="#{asignaciones.nombres} #{asignaciones.apellidos}--->
                                           #{asignaciones.cargo.nombre}"
                                           itemValue="#{asignaciones.codUsuario}"/>  
                        </p:selectOneMenu>   
                   </p:panel>  
                <p:separator />
                <p:commandButton value="&nbsp;Actualizar" update=":frmIncidencias:datatable, growlEditar, dlgEditar" oncomplete="dlgEditar.hide()" 
                                 actionListener="#{IncidenciaBean.actualizar()}" image="icon-guardar" />  
                <p:commandButton value="&nbsp;cancelar" update=":frmIncidencias:datatable" oncomplete="dlgEditar.hide()" 
                                 image="icon-cancelar" />  
            </p:dialog>  
        </h:form>


        <!--Form  eliminar Incidencia  -->

        <h:form id="frmEliminar">  
            <p:growl id="growlEliminar" sticky="true" />  

            <p:confirmDialog id="dlgEliminar" message="¿Est&aacute; seguro de eliminar esta Incidencia?"  
                             header="Eliminar Usuario" severity="alert" widgetVar="dlgEliminar">  

                <p:commandButton value="&nbsp;Eliminar" update=":frmIncidencias:datatable, growlEliminar, dlgEliminar" oncomplete="dlgEliminar.hide()" 
                                 actionListener="#{usuarioBean.eliminar()}" image="icon-guardar" />  
                <p:commandButton value="&nbsp;cancelar" update=":frmIncidencias:datatable" oncomplete="dlgEliminar.hide()" 
                                 image="icon-cancelar" />   

            </p:confirmDialog>  

        </h:form>
        <!-- END PRUEBA PARA VER LA SOLUCION EN DIALOG-->

    </h:body>
</html>

